{% load staticfiles %}
{% load notifications_tags %}
{% load forum_tags %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    {#    <link rel="stylesheet" href="{% static 'forum/css/bootstrap.min.css' %}">#}
    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'forum/css/friendly.css' %}">
    {% notifications_unread as unread_count %}
    <title>{% if unread_count %}({{ unread_count }}){% endif %} django forum demo</title>
    <style>
        body {
            background-color: #f8f9fa;
        }

        .asteriskField {
            color: red;;
        }

        blockquote {
            position: relative;
            color: #999;
            font-weight: 400;
            border-left: 1px solid #1abc9c;
            padding-left: 1em;
            margin: 1em 3em 1em 2em;
        }

        pre, code, pre tt {
            font-family: Courier, 'Courier New', monospace;
        }

        pre {
            background: #f8f8f8;
            border: 1px solid #ddd;
            padding: 1em 1.5em;
            display: block;
            -webkit-overflow-scrolling: touch;
        }

        /* 简单地设置会使 meidia 失效 */
        .post-body img {
            max-width: 100%;
        }

        /*
        .post-item h6 > a {
            color: #778087;
        }

        .post-item .nickname,
        .post-item h6 > a:hover,
        .post-item .nickname:hover {
            color: #4d5256;
        }
        */

        a {
            color: #778087;
        }

        a:hover {
            color: #4d5256;
        }

        .post-body a {
            text-decoration: underline;
        }

        .media {
            word-wrap: break-word;
            word-break: break-all;
            overflow: auto;
        }

        /* pagedown */
        .wmd-wrapper .wmd-panel {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            min-width: 0;
        }

        .wmd-wrapper .wmd-input {
            height: 15em;
            width: 100%;
            background-color: white;
            border: solid 1px #cccccc;
        }

        .wmd-wrapper .wmd-preview {
            background-color: white;
        }

        .wmd-wrapper .wmd-preview-title {
            margin-top: 10px;
        }

        #id_comment_wmd_button_bar {
            overflow: auto;
        }
    </style>
    {% block style %}
    {% endblock style %}
</head>
<body>
<header>
    <nav class="navbar navbar-light mb-2" style="background-color: #fff">
        <div class="container">
            <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse"
                    data-target="#navbarResponsive"
                    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
            <div class="collapse navbar-toggleable-md" id="navbarResponsive">
                <a class="navbar-brand" href="{% url 'forum:index' %}">django forum demo</a>
                <form class="form-inline float-lg-left">
                    <input class="form-control" type="text" placeholder="搜索功能正在开发中...">
                    <button class="btn btn-outline-success" type="submit">搜索</button>
                </form>
                <ul class="nav navbar-nav float-lg-right">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'forum:index' %}">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    {% if request.user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'users:detail' request.user.username %}"><img
                                    src="{{ request.user.mugshot_thumbnail.url }}" alt=""
                                    style="width: 26px;"> {{ request.user.nickname }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'users:profile' %}">设置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'account_logout' %}?next={{ request.path }}">登出</a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'account_signup' %}?next={{ request.path }}">注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'account_login' %}?next={{ request.path }}">登录</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        {% block content %}
            <div class="row">
                {% block main %}
                {% endblock main %}
                {% block aside %}
                    <aside class="col-md-4">
                        {% if request.user.is_authenticated %}
                            <ul class="list-group mb-2">
                                <li class="list-group-item">
                                    <div class="media">
                                        <a class="media-left" href="{{ request.user.get_absolute_url }}">
                                            <img class="media-object" src="{{ request.user.mugshot_thumbnail.url }}"
                                                 alt=""
                                                 style="width: 48px;">
                                        </a>
                                        <div class="media-body media-middle">
                                            <a href="{{ request.user.get_absolute_url }}">{{ request.user.nickname }}</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <a href="{% url 'forum:create' %}"><i class="fa fa-pencil" aria-hidden="true"></i>
                                        发布新帖子</a>
                                </li>
                                <li class="list-group-item">
                                    {% notifications_unread as unread_count %}
                                    <a href="{% url 'forum:all' %}"
                                       {% if unread_count %}style="color: red"{% endif %}><i
                                            class="fa fa-bell"
                                            aria-hidden="true"></i> {{ unread_count }} 条未读提醒</a>
                                </li>
                            </ul>
                        {% else %}
                            <div class="card card-block">
                                <h3 class="card-title">django forum demo</h3>
                                <hr>
                                <div class="text-lg-center">
                                    <button class="btn btn-outline-info btn-sm"><a
                                            href="{% url 'account_signup' %}?next={{ request.path }}">现在注册</a></button>
                                    <p>
                                        已注册用户请<a href="{% url 'account_login' %}?next={{ request.path }}">登录</a>
                                    </p>
                                </div>
                            </div>
                        {% endif %}

                        <ul class="list-group">
                            <li class="list-group-item">
                                <h3 class="list-group-item-heading">今日热议主题</h3>
                            </li>
                            {% get_popular_posts as popular_post_list %}
                            {% for post in popular_post_list %}
                                <li class="list-group-item">
                                    <div class="media">
                                        <a class="media-left" href="{{ post.author.get_absolute_url }}">
                                            <img class="media-object" src="{{ post.author.mugshot_thumbnail.url }}"
                                                 alt=""
                                                 style="width: 24px;">
                                        </a>
                                        <div class="media-body">
                                            <h6 class="media-heading"><a
                                                    href="{{ post.get_absolute_url }}">{{ post.title }}</a></h6>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </aside>
                {% endblock aside %}
            </div>
        {% endblock content %}
    </div>

</header>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/tether/1.4.0/js/tether.min.js"></script>
{#<script src="{% static 'forum/js/bootstrap.min.js' %}"></script>#}
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script>
    var simplemdeJQuery = null;

    if (typeof jQuery !== 'undefined') {
        simplemdeJQuery = jQuery;
    } else if (typeof django !== 'undefined') {
        //use jQuery come with django admin
        simplemdeJQuery = django.jQuery
    } else {
        console.error('cant find jQuery, please make sure your have jQuery imported before this script');
    }

    if (!!simplemdeJQuery) {
        simplemdeJQuery(function () {
            simplemdeJQuery.each(simplemdeJQuery('.simplemde-box'), function (i, elem) {
                var options = JSON.parse(simplemdeJQuery(elem).attr('data-simplemde-options'));
                options['element'] = elem;
                var simplemde = new SimpleMDE(options);
                elem.SimpleMDE = simplemde;
            });
        });
    }
</script>
{% block script %}
{% endblock script %}
</body>
</html>